<template>
  <div class="app-container calendar-list-container">
    <el-form
      class="small-space"
      :model="reqData.cst_order_head"
      label-position="right"
      label-width="90px"
      :inline="true"
      ref="headForm"
      :rules="saveRules">

      <!-- 头信息 -->
      <create-cst-order-head :reqData="reqData" :pickerOptions="pickerOptions"></create-cst-order-head>

      <!-- 订单明细 -->
      <create-cst-order-detail :lineList="lineList" :pickerOptions="pickerOptions" :projectId="reqData.cst_order_head.project_id"></create-cst-order-detail>

      <el-button
        type="primary"
        size="large"
        style="margin: 10px auto;width: 100%;"
        @click.native="save">保存头信息</el-button>
    </el-form>
  </div>
</template>

<script>
  import { format } from '@/utils/dateFmt'
  import ElButton from "../../../../node_modules/element-ui/packages/button/src/button.vue";
  import {
    cstOrderQueryHead,
    cstOrderLineList,
    modifyCstOrder
  } from '@/api/cstOrder/customerOrder'
  import createCstOrderHead from './createCstOrder_head.vue'
  import createCstOrderDetail from './createCstOrder_detail.vue'

  export default {
    components: {ElButton},
    name: 'createCustomerOrder',
    components:{
      createCstOrderHead,
      createCstOrderDetail
    },
    data() {
      const validatesalesman = (rule, value, callback) => {
        console.log(value)
        if (!value) {
          callback(new Error('不能为空'))
        } else {
          callback()
        }
      }
      return {
        reqData:{
          client_type:1,
          company_id:'',
          company_name:'',
          cst_order_head:{
            coin:null,
            coin_name:null,
            cst_company_id:null,
            cst_name:null,
            delivery_place:null,
            delivery_type:null,
            invoice_type:null,
            invoice_type_name:null,
            is_include_tax:null,
            order_accept_date:'',
            project_id:null,
            project_no:null,
            remark:null,
            salesman:null,
            salesman_name:null,
            tax_ratio:null
          }
        },
        lineList:[],
        saveRules: {
          coin: [{ required: true, trigger: 'blur', message: '不能为空' }],
          cst_name: [{ required: true, trigger: 'change', message: '不能为空' }],
          order_accept_date: [{ type: 'date', required: true, message: '不能为空', trigger: 'change' }],
          /*salesman: [{ required: true, trigger: 'blur', validator: validatesalesman}]*/
          salesman_name: [{ required: true,type:'string', trigger: 'blur', message: '不能为空' }]
        },
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        }
      }
    },
    mounted() {
      let project_id = this.$route.query.project_id
      if(project_id){//如果router里project_id存在则本页面就是编辑状态,需要查询出order_id对应的订单信息
        let req = {
          client_type:1,
          project_id:project_id
        }
        cstOrderQueryHead(req)  //如果路由中带有quote_id 则调用接口取报价单头信息
          .then(res => {
            this.reqData.cst_order_head = res.project_head;

            //这里把order_accept_date转成Date对象,因为element ui的日期组件目前只支持接收 Date对象的值. 否则会报错
            this.reqData.cst_order_head.order_accept_date = new Date(Date.parse(res.project_head.order_accept_date))

            cstOrderLineList(req)   //获取头信息成功后则获取明细行信息
              .then(res => {
                this.lineList = res.order_line_list
              })
              .catch(err => {
                console.log(err)
              })
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    methods: {
      save(){ //保存头信息
        this.$refs.headForm.validate(valid => {
          if(valid){

            //对日期 参数做特殊处理. 转换成指定格式的字符串
            if(new Date(this.reqData.cst_order_head.order_accept_date)){
              this.reqData.cst_order_head.order_accept_date = format(new Date(this.reqData.cst_order_head.order_accept_date),'yyyy-MM-dd')
            }
            modifyCstOrder(this.reqData)
              .then(res => {
                this.reqData.cst_order_head = res.project_head

                //这里把order_accept_date转成Date对象,因为element ui的日期组件目前只支持接收 Date对象的值. 否则会报错
                this.reqData.cst_order_head.order_accept_date = new Date(Date.parse(res.project_head.order_accept_date))

                this.$message({
                  type:'success',
                  message:'保存成功'
                })
              })
              .catch(err => {
                console.log(err)
                this.$message.error('保存失败')
              })
          }else{
            this.$message.error('还有必填项没填写!')
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .hr-text{
    color: #BFBFBF;
  }
  .hr-color{
    color: #e0e0e0;
    background-color: #e0e0e0;
    /*height: 0.5px;*/
    border: 0.5px solid #e0e0e0;
  }
  .form-box{
    margin-bottom: 20px;
  }
</style>
